<template>
    <div>
        <svg width="163" height="130" id="container" class="boxBodyitem">
            <polygon id="boxCover" fill="rgba(5, 155, 54, 0.8)"></polygon>
            <polygon id="boxBody" fill="rgba(5, 135, 54, 0.5)"></polygon>
        </svg>
        <!-- <div class="boxBodyitem"></div> -->
        <div class="jjc"></div>
    </div>
</template>

<script lang='ts' setup>
import { onMounted } from 'vue';

let boxBodypolygon: HTMLElement;
let boxCoverpolygon: HTMLElement;

const boxBodySrt = '20.5% 99% 99% 99% 99% 99% 21.5% 99% 1% 55.5% 1% 55.5';
const boxBodyPercentArr = boxBodySrt.split('% ');
let boxBodyNumber: string = '';

const boxCoverSrt = '20.5% 99% 99% 99% 56% 55.5% 1% 55.5';
const boxCoverPercentArr = boxCoverSrt.split('% ');
let boxCoverNumber: string = '';

const calculateHexagonPoints = (PercentArr: Array<any>, width: number, height: number) => {
    const points = PercentArr.map((item: string, index: number) => {
        if (index % 2 === 0) {
            return Number(item) * width / 100
        } else {
            return Number(item) * height / 100
        }
    })
    return points.join(' ');
}
const totalTime = 10000;
const animatPoints = (height: number) => {
    let leftLineStep = (55.5 * height / 100 - 11 * height / 100) / 100;
    let stepSize = (99 * height / 100 - 35 * height / 100) / 100;

    let boxBodyNumberArr: Array<any> = boxBodyNumber.split(' ');
    boxBodyNumberArr = boxBodyNumberArr.map((item: string, index: number) => {
        if ([1, 3, 11].includes(index)) {
            if (index === 11) {
                return (Number(item) - leftLineStep).toString();
            }
            return (Number(item) - stepSize).toString();
        } else {
            return item
        }
    })
    boxBodyNumber = boxBodyNumberArr.join(' ');

    let boxCoverNumberArr: Array<any> = boxCoverNumber.split(' ');
        boxCoverNumberArr = boxCoverNumberArr.map((item: string, index: number) => {
        if ([1, 3, 5, 7].includes(index)) {
            if ([5, 7].includes(index)) {
                return (Number(item) - leftLineStep).toString();
            }
            return (Number(item) - stepSize).toString();
        } else {
            return item
        }
    })
    boxCoverNumber = boxCoverNumberArr.join(' ');
}

boxBodyNumber = calculateHexagonPoints(boxBodyPercentArr, 163, 130);
boxCoverNumber = calculateHexagonPoints(boxCoverPercentArr, 163, 130);

const setPoints = () => {
    animatPoints(130);
    boxBodypolygon?.setAttribute('points', boxBodyNumber);
    boxCoverpolygon?.setAttribute('points', boxCoverNumber);
}
var timerId: any
onMounted(() => {
    boxBodypolygon = document.getElementById('boxBody') as HTMLElement;
    boxCoverpolygon = document.getElementById('boxCover') as HTMLElement;
    setPoints();
    let timeItem = 0
    timerId = setInterval(function () {
        timeItem += 100;
        if (timeItem >= totalTime) {
            clearInterval(timerId)
        }
        setPoints();
    }, 10);
})

</script>

<style lang="scss" scoped>
.boxBodyitem {
    width: 163px;
    height: 130px;
    position: absolute;
    bottom: 0;
    // background: rgba(0, 0, 0, 0.8);
    // clip-path: polygon(21% 99%, 99% 99%, 56% 55.5%, 1% 55.5%);
}

.jjc {
    width: 163px;
    height: 130px;
    background-size: cover;
    background-image: url('/src/assets/gufeng/jjc.png');
}
</style>